<template>
    <swiper class="swiper m-b-25" v-if="props.data.list.length > 0" :vertical="false" :indicator-dots="props.dotsSelect"
        :autoplay="props.autoplaySelect" :interval="props.data.duration" :circular="props.circularSelect"
        :indicator-color="props.indicatorColor" :indicator-active-color="props.indicatorColorActive" :style="{'height':`${props.data?.height}px`}">
        <swiper-item v-for="item, index in props.data.list" :key="index" @click="hanldeClickImage(item)">
            <image class="swiper-img" :src="item.image" mode="aspectFill" :style="{'height':`${props.data?.height}px`}"></image>
        </swiper-item>
    </swiper>
</template>
<script setup lang="ts">
    import type { PageConfigItemsImgSlideType } from '@/core/models';
    import { handleAdvertiseDetail } from '@/core/utils';

    const props = withDefaults(defineProps<{
        data ?: any,
        dotsSelect ?: boolean,
        autoplaySelect ?: boolean,
        circularSelect ?: boolean,
        indicatorColor ?: string,
        indicatorColorActive ?: string,
    }>(), {
        data: {},
        dotsSelect: true,
        autoplaySelect: true,
        circularSelect: true,
        indicatorColor: '#EEF2F6',
        indicatorColorActive: '#E74435'
    });

    const hanldeClickImage = (item : PageConfigItemsImgSlideType) => {
        handleAdvertiseDetail(Number(item.linkType), item.linkValue);
    }
</script>

<style lang="scss" scoped>
    @import "./home-swiper.scss";
</style>